<template>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-row class="table-head-box">
        <!-- <el-col :span="4" class="flex flex-start"> -->
        <!-- <el-button type="primary" icon="el-icon-plus"    plain @click="addStoreHandler()">添加商户</el-button> -->
        <!-- </el-col> -->
        <el-col :span="24" class="flex flex-end input-box">
          <el-input
            v-model="search.lkParam.publish_title"
            clearable
            placeholder="标题"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchHandler"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="petPublishList"
      border
      style="width: 100%"
      tooltip-effect="dark"
      size="mini"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="publishTitle" label="标题"> </el-table-column>
      <el-table-column prop="publishContent" label="发布内容">
        <template slot-scope="scope">
          <div v-html="scope.row.publishContent"></div>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="发布人"> </el-table-column>
      <el-table-column prop="typeName" label="类型名称"> </el-table-column>
      <!-- <el-table-column prop="publishPath" label="发布路径"> 
          <template slot-scope="scope" v-if="scope.row.publishPath"  >
            <span  v-for="item in scope.row.publishPath.split(',')" v-bind:key="item.index">
              <img :src="item" width="50px" height="50px">
              </span>
          </template>

      </el-table-column> -->
      <el-table-column prop="publishType" label="发布类型">
        <template slot-scope="scope">
          <div v-if="scope.row.publishType == 1">图片</div>
          <div v-if="scope.row.publishType == 2">视频</div>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="发布位置">
      </el-table-column>
      <el-table-column prop="positionAddr" label="具体地址">
      </el-table-column>
      <el-table-column prop="publishTime" label="发布时间">
      </el-table-column>
      <el-table-column prop="publishStatus" label="发布状态">
        <template slot-scope="scope">
          <div v-if="scope.row.publishStatus == 0">
            <i class="el-icon-cold-reading" style="color: #ddd"></i>草稿
          </div>
          <div v-if="scope.row.publishStatus == 1">
            <i class="el-icon-question" style="color: #409eff"></i> 发布/待审核
          </div>
          <div v-if="scope.row.publishStatus == 2">
            <i class="el-icon-success" size="20" style="color: #5be15b"></i
            >审核不通过
          </div>
          <div v-if="scope.row.publishStatus == 3">
            <i class="el-icon-error" style="color: #f56c6c"></i
            >审核通过（对外发布
          </div>
          <div v-if="scope.row.publishStatus == 4">
            <i class="el-icon-warning" size="20" style="color: #5be15b"></i>禁播
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="备注"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button
            type="default"
            class="el-icon-view"
            size="mini"
            @click="updatePetPublishHandler(scope.$index, scope.row, 'preview')"
            >预览</el-button
          >

          <el-button
            v-if="scope.row.publishStatus == 1"
            type="primary"
            class="el-icon-warning-outline"
            size="mini"
            @click="updatePetPublishHandler(scope.$index, scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-count="search.size"
          :total="search.total"
          :current-page="search.current"
          @current-change="sizeChangeHandler"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <template v-if="showPetPublishDialog">
      <petPublishAdd
        :operateType="operateType"
        :petPublishDialog="showPetPublishDialog"
        :popPetPublish="petPublish"
        @close="close"
      ></petPublishAdd>
    </template>
  </div>
</template>
<script>
import { petPublishPageListUrl } from "@/utils/common";
import petPublishAdd from "./pet-publish-add";
// import { model } from "@/scripts/common/dialog.js";

export default {
  components: {
    petPublishAdd,
  },
  data() {
    return {
      petPublishList: [],
      showPetPublishDialog: false, // 是否展示审核弹框
      petPublish: null,
      operateType: "", // 执行的是预览还是审核
      search: {
        current: 1,
        size: 10,
        total: 0,
        lkParam: { userName: "" },
        eqParam: {},
      },
    };
  },

  mounted() {
    this.loadPetPublish();
  },
  methods: {
    addUserHandler: function () {
      this.petPublish = {};
      this.showPetPublishDialog = true;
    },
    updatePetPublishHandler: function (index, row, type) {
      this.petPublish = row;
      this.operateType = type ? type : "";
      this.showPetPublishDialog = true;
    },
    closeHandler: function () {
      this.showPetPublishDialog = false;
      this.loadPetPublish();
    },
    /**
     * @description: 关闭弹框
     * @param {*}
     * @return {*}
     */
    close() {
      this.showPetPublishDialog = false;
    },
    /**
     * 删除用户
     */
    // deleteUserHandler: function (index, row) {
    //   this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
    //     .then(() => {
    //       this.axios
    //         .post("/fc/su/del/" + row.userId)
    //         .then(response => {
    //             console.log(response)
    //           this.$message({ type: "success", message: "删除成功!"  });
    //           this.loadPetPublish();
    //         })
    //         .catch(response => {
    //             console.log(response)
    //           this.$message({ type: "warn", message: "删除失败!"  });
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({ type: "info", message: "已取消删除" });
    //     });
    // },
    loadPetPublish() {
      this.axios
        .post(petPublishPageListUrl, this.search)
        .then((response) => {
          var data = response.data.data;
          data.records.map((item, index) => {
            console.info(index)
            item.publishPath =
              item.publishType == 1
                ? item.publishPath.split(",")
                : item.publishPath;
          });

          this.petPublishList = data.records;
          this.search.total = data.total;
        })
        .catch((response) => {
          console.log("response -   " + response);
        });
    },
    sizeChangeHandler: function (value) {
      this.search.current = value;
      this.loadPetPublish();
    },
    searchHandler: function () {
      this.search.current = 1;
      this.loadPetPublish();
    },
  },
};
</script>
<style scoped>
.grid-content {
  text-align: left;
  height: 45px;
}
</style>
